import React, { Component } from 'react';
import services from '../../api/interface'
import '../../style/Index/shop/Shopcarr.css'
import { Radio } from 'antd-mobile'
import { Button, Dialog, Space, Divider } from 'antd-mobile'
import { LeftOutline, DeleteOutline } from 'antd-mobile-icons'
// import { DemoBlock, DemoDescription, sleep } from 'demos'
import { Empty } from 'antd-mobile'
import { Toast } from 'antd-mobile'
class Shopcar extends Component {
    state = {
        shopclist: [], shopnamber: '',
        cartid: '', mainlist: [], time: '', flag: '', num: ''
    }
    //删除购物车单条数据
    async onclearonce(item) {
        console.log(item);
        var res2 = await services.cart.cart_remove({ token: localStorage.getItem('token'), cartid: item.cartid })
        var awe = await services.cart.cart_list({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
        this.setState({
            cartid: item.cartid,

            shopclist: awe.data.data,
        }, () => {
            console.log(this.state.num);
        })
        // await services.cart.cart_updatenum({ token: localStorage.getItem('token'), cartid: item.cartid, num: '2' })
    }
    async componentDidMount() {
        //查看购物车数量
        var res = await services.cart.cart_list({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
        //添加订单
        var ress = await services.order.order_addOrder({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
        this.setState({
            shopclist: res.data.data,
            time: ress.data
        })
        // console.log(this.state.shopclist.num);
        console.log(ress.data);
        var res3 = await services.pro.pro_list({ count: 1, limitNum: 20 })
        this.setState({
            mainlist: res3.data.data
        })
        localStorage.setItem('paid',Number(this.state.shopclist[0].num)* Number(this.state.shopclist[0].originprice))
        console.log(this.state.num);
    }
    //选中状态
    async onSelected(item) {
        var sel = await services.cart.cart_selectone({ token: localStorage.getItem('token'), cartid: item.cartid, flag: item.flag })
        console.log(item.num,item.originprice);
    }
    //全部选中
    async onSelectAll() {
        await services.cart.cart_selectall({ token: localStorage.getItem('token'), cartid: this.state.cartid, type: true })
    }
    //清除购物车所有数据
    async onClickclearall(item) {
        var res1 = await services.cart.cart_removeall({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
        if (res1.data.code == 200) {
            Toast.show({
                icon: 'success',
                content: '清除成功！',
            })
        }
        var awe = await services.cart.cart_list({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
        this.setState({
            shopclist: awe.data.data
        })

    }
    //提交订单
    async onSubmit() {
        // var res4 = await services.order.order_confirmOrder({ time: this.state.time,userid: localStorage.getItem('userid') })
        //添加订单
        var rs=await services.order.order_addOrder({ token: localStorage.getItem('token'), userid: localStorage.getItem('userid') })
        if (rs.data.code == 200) {
            Dialog.confirm({
                content: '是否提交订单',
                onConfirm: async () => {
                    Toast.show({
                        icon: 'success',
                        content: '提交成功',
                        position: 'middle',
                    })
                    this.props.history.push({pathname:'/order',state:{time:rs.data.time,price:Number(this.state.num) * Number(this.state.shopnamber)}})
                },
            })
        }


    }
    //跳转到详情
    onClick(item) {
        this.props.history.push({ pathname: '/detail', state: { id: item.proid } })
    }
    //数量加
    onadd(item) {
        this.setState({
            num: item.num++,
            shopnamber: item.originprice,
            num: item.num,
        })
    }
    //数量减
    onsub(item) {
        this.setState({
            num: item.num == 0 ? 0 : item.num--,
            price: item.originprice
        })
        console.log(item.originprice);
    }
    onClickleft(){
        this.props.history.push('/index')
    }
    render() {
        return (
            <div className='shopcar'>
                <div className='dnavbar' style={{width:'100%'}}>
                    <span onClick={() => { this.onClickleft() }}><LeftOutline /></span>
                    <div>购物车</div>
                    <div className='dmicon' onClick={() => { this.onClickclearall() }}>
                        <DeleteOutline />
                    </div>
                </div>
                <div className="shop_main">
                    {
                        this.state.shopclist == null ? <Empty description='暂无数据' /> : this.state.shopclist.map((item, index) => {
                            return (
                                <div className="shopp_list" key={index}>
                                    <div className="shopp_list_radio" onClick={() => { this.onSelected(item) }}>
                                        <Radio
                                            value='small'
                                            style={{
                                                '--icon-size': '18px',
                                                '--font-size': '14px',
                                                '--gap': '6px',
                                            }}

                                        >
                                        </Radio>
                                    </div>
                                    <div className="shopp_list_left">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="shopp_list_right">
                                        <div className="shopp_list_right_up">
                                            <div className="shopp_list_right_proname">
                                                {item.proname}
                                            </div>
                                            <div className="shopp_list_orginprice">
                                                ￥{item.originprice}
                                            </div>
                                        </div>
                                        <div className="shopp_list_right__down">
                                            <div className="shopp_list_right__down_num">
                                                {item.num}
                                            </div>
                                            <div className="shopp_list_right__down_anniu">
                                                <div className="shopp_list_right__down_anniu_add" onClick={() => { this.onadd(item) }}>
                                                    +
                                                </div>
                                                <div className="shopp_list_right__down_anniu_number">
                                                    {item.num * item.originprice}

                                                </div>

                                                <div className="shopp_list_right__down_anniu_sub" onClick={() => { this.onsub(item) }}>
                                                    －
                                                </div>
                                            </div>
                                            <div className="shopp_list_right__down_delete" onClick={() => { this.onclearonce(item) }}>
                                                ×
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="shopcartguess_like">
                    猜你喜欢
                </div>
                <div className='main'>
                    {
                        this.state.mainlist.map((item, index) => {
                            return (
                                <div className="mainboxl" key={index} onClick={() => { this.onClick(item) }}>
                                    <div className="img">
                                        <img src={item.img3} alt="" />
                                    </div>
                                    <div className="xia">
                                        <div className="categroy">{item.proname}</div>
                                        <div className="priodd">￥{item.originprice}</div>
                                    </div>

                                </div>
                            )
                        })
                    }
                </div>
                <div className="shopc_bottom">
                    <div className="shopc_bottom_radio" onClick={() => { this.onSelectAll() }}>
                        <Radio
                            value='small'
                            style={{
                                '--icon-size': '18px',
                                '--font-size': '14px',
                                '--gap': '6px',
                            }}
                            onClick={() => { this.onSelectAll() }}
                        >全选
                        </Radio>
                    </div>
                    <div className="shopc_bottom_right">
                        <div className="shopc_bottom_money">
                            ￥{Number(this.state.num) * Number(this.state.shopnamber)}
                        </div>
                        <div className="shopc_bottom_order" onClick={() => { this.onSubmit() }}>
                            提交订单
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Shopcar;